<template>
  <el-table
    v-loading.fullscreen.lock="loading"
    :data="data2.tableData"
    stripe
    style="{'overflow: auto',' width: 700px',' height: height','margin-left: 30px'}"
  >
    <!-- <el-table-column type="index" width="100" label="序号" /> -->
    <el-table-column prop="id" label="序号" width="100" />
    <el-table-column
      v-if="columns.length > 0"
      v-for="item in columns"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
    />

    <!-- <el-table-column prop="donor" label="donor" width="100" />
    <el-table-column prop="donor_id" label="donorId" width="100" /> -->
    
    <el-table-column prop="expression" label="expression" width="100" />
    <!-- <el-table-column prop="id" label="id" width="100" />

    <el-table-column prop="major_all_id" label="majorAllId" width="100" />
   
    <el-table-column prop="major_myeloid" label="majorMyeloid" width="160" />
    
    <el-table-column prop="major_progenetior_id" label="majorProgenetiorId" width="160" />
   

    <el-table-column prop="name_id" label="nameId" width="100" />

    <el-table-column prop="sub_all_id" label="subAllId" width="100" />
    
    <el-table-column prop="sub_b_plasma_id" label="subBPlasmaId" width="160" />

    <el-table-column prop="sub_myeloid_id" label="subMyeloidId" width="160" />
   
    <el-table-column prop="sub_progenetior_id" label="subProgenetiorId" width="160" />
    
    <el-table-column prop="tissue" label="tissue" width="100" />
    <el-table-column prop="tissue_id" label="tissueId" width="100" />
    <el-table-column prop="uid" label="uid" width="100" /> -->
    <template v-if="searchData.major_type == 'all'">
      <el-table-column prop="major_all" label="majorAll" width="100" />
      <el-table-column prop="sub_all" label="subAll" width="100" />
      <el-table-column prop="name" label="name" width="100" />
      <el-table-column prop="stage" label="stage" width="100" />
      <el-table-column prop="umap_1" label="umap1" width="100" />
      <el-table-column prop="umap_2" label="umap2" width="100" />
    </template>
    <template v-if="searchData.major_type == 'tnk'">
      <el-table-column prop="major_tnk" label="majorTnk" width="100" />
      <el-table-column prop="sub_tnk" label="sub_tnk" width="100" />
      <el-table-column prop="name" label="name" width="100" />
      <el-table-column prop="stage" label="stage" width="100" />
      <el-table-column prop="umap_3" label="umap3" width="100" />
      <el-table-column prop="umap_4" label="umap4" width="100" />
    </template>
    <template v-if="searchData.major_type == 'myeloid'">
      <el-table-column prop="major_myeloid" label="major_myeloid" width="160" />
      <el-table-column prop="sub_myeloid" label="subMyeloid" width="160" />
      <el-table-column prop="name" label="name" width="100" />
      <el-table-column prop="stage" label="stage" width="100" />
      <el-table-column prop="umap_5" label="umap5" width="100" />
      <el-table-column prop="umap_6" label="umap6" width="100" />
    </template>
    <template v-if="searchData.major_type == 'b_plasma'">
      <el-table-column prop="major_myeloid" label="major_myeloid" width="160" />
      <el-table-column prop="sub_b_plasma" label="subBPlasma" width="100" />
      <el-table-column prop="name" label="name" width="100" />
      <el-table-column prop="stage" label="stage" width="100" />
      <el-table-column prop="umap_7" label="umap7" width="100" />
      <el-table-column prop="umap_8" label="umap8" width="100" />
    </template>
    <template v-if="searchData.major_type == 'progenetior'">
      <el-table-column prop="major_progenetior" label="majorProgenetior" width="160" />
      <el-table-column prop="sub_progenetior" label="subProgenetior" width="160" />
      <el-table-column prop="name" label="name" width="100" />
      <el-table-column prop="stage" label="stage" width="100" />
      <el-table-column prop="umap_9" label="umap9" width="100" />
      <el-table-column prop="umap_10" label="umap_10" width="100" />
    </template>
  </el-table>

  <div class="pagination-container">
    <el-pagination
      @current-change="currentChange"
      layout="prev, pager, next,sizes"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="data2.page_size"
      :current-page="data2.page"
      :total="data2.total"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { watch, onMounted, ref, defineExpose, reactive, defineEmits } from 'vue'
import { getTableData } from '@/api'

const emits = defineEmits(['sendData'])

var height = ref(600)

const fullscreenLoading = ref(false)

const loading = ref(false)
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`

// 动态生成表头数据
const tableColumns = ref([
  {
    prop: 'name',
    label: '姓名',
    width: 120,
  },
])

function currentChange(num) {
  searchData.page = num
  data2.page = num
  childMethod(searchData)
}

function handleSizeChange(pageSize) {
  searchData.page = 1
  data2.page = 1
  searchData.page_size = pageSize
  data2.page_size = pageSize
  childMethod(searchData)
}
var data2 = reactive({
  tableData: [],
  total: 0,
  page: 1,
  page_size: 10,
})
watch(data2, (newValue, oldValue) => {
  if (newValue.page_size == 10) {
    height.value = 600
  } else if (newValue.page_size == 20) {
    height.value = 700
  } else if (newValue.page_size == 30) {
    height.value = 800
  } else if (newValue.page_size == 50) {
    height.value = 3000
  }
  emits('sendData', height.value)
})
var searchData = {}
var columns = []
const childMethod = async (data) => {
  loading.value = true
  columns = []
  searchData = data
  var arr = searchData.cell_names.split(',')
  arr.forEach((item) => {
    columns.push({
      prop: item,
      label: item,
      width: 100,
    })
  })

  loading.value = false
  var obj = await getTableData(data)

  data2.total = obj.total
  data2.tableData = obj.data
}
// 向父组件暴露方法
defineExpose({
  childMethod,
})
onMounted(() => {
  // 模拟数据集
  // childMethod()
})
</script>
<style scoped>
:deep .el-select__wrapper {
  width: 100px;
}
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
:deep thead .cell {
  color: black;
  font-weight: bold;
}
</style>